<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery Animate Queue</title>
		
		<style type="text/css">
			div#test1 {
				background-image: url(./images/DonCherryArtDeco.jpg);
				left: 0px;
				top: 0px;
			}
			
			div#test2 {
				background-image: url(./images/BlackSaint.jpg);
				left: 350px;
				top: 150px;
			}
			
			div[id='test3'] {
				background-image: url(./images/OrnetteColemanTrioEmptyFoxhole.jpg);
				left: 550px;
				top: 300px;
			}
			
			div.imageContainer {
				position: absolute;
				width: 200px;
				height: 200px;
			}
			
			div.container {
				position: absolute;
				left: 0px;
				top: 250px;
			}
		</style>
		
		<script src="scripts/jquery-1.4.4.min.js"></script>
		<script type="text/javascript">
			jQuery(function() {
				$("#btn").click(function(){
//					var test1 = $("#test1").get(0);
//					alert(test1.id);
					$("#test1").animate(
						{ left: $(this).position().left + 256 },
						"slow",
						"linear"
					);
					
					$("#test1").animate(
						{ top: $(this).position().top + 300 },
						"slow"
					);
					
					$("#test2").animate(
						{ left: "-=80" },
						"slow"
					);
					
					$("#test2").animate(
						{ top: "-=40" },
						"slow"
					);
				}); // end of #btn click register
				
				$("#btn2").click(function() {
					$("#test3").queue("test3AnimateChain", function() {
						$(this).animate(
							{ 
								left: "+=100",
								top: "-50",
							},
							"slow", "swing"
						);
					});
					
					$("#test3").queue("test3AnimateChain", function second() {
						$(this).animate(
							{ 
								left: "-=85",
								top: "+100",
							},
							"slow", "swing"
						);
						$("#test3").dequeue("chain2");
					}).queue("chain2", function() {
						$(this).animate(
							{ 
								left: "-=55",
								top: "+100",
							},
							"slow", "swing"
						);
						$(this).dequeue("chain2");
					});
					
					$("test3").queue("chain2", function() {
						$(this).animate(
							{
								left: "+=100",
								top: "+350",
							},
							"slow", "swing"
						);
						$(this).dequeue("chain2");
					});
					
					$("#test3").dequeue("test3AnimateChain");
					
				}); // end of #test3.queue() method
				
			});  // end of anonymous function for jQuery
		</script>
		
	</head>
	
	<body style="background-color:black">
		<div class="imageContainer" id="test1"></div>
		<div class="imageContainer" id="test2"></div>
		<div class="imageContainer" id="test3"></div>
		<div class="container">
			<button id="btn">move test1 and test2</button>
			<button id="btn2">move test3 by queue</button>
		</div>
		
	</body>
</html>
